<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新整体DOM</title>
</head>
<body>
    <ul id="list"></ul>
    <button id="btn">更改数据</button>
    <script>
        let data = ["a", "b", "c", "d", "e"]
        let list = document.getElementById("list")
        let btn = document.getElementById("btn")

        function renderData() {
            let str = ""
            for (let attr in data) {
                str += `<li>${data[attr]}</li>`
            }
            list.innerHTML = str
        }
        renderData()

        btn.onclick = function () {
            data[1] = "hello"
            renderData()
        }
    </script>
</body>
</html>